<template>
<div>
		<div>
			<el-input v-model="$data.number" style=" width:180px;">
				<template slot="prepend">开始数值:</template>
			</el-input>

			<el-input v-model="$data.lines" style="margin:20px; width:180px;">
				<template slot="prepend">行数:</template>
			</el-input>

			<el-button @click="gen_click">生成!</el-button>
			<el-button @click="pre_click">上一页!</el-button>
			<el-button @click="next_click">下一页!</el-button>

            <kp label="查找" style="margin-left:10px;">
                <el-input v-model="$data.find"></el-input>
                <el-button @click="find_click">定位</el-button>
            </kp>


			<div ref="content_dom" v-html="$data.content" style="display: block;margin:6px;font-size:18px;zoom:2;background-color: #d3dce6;"></div>
		</div>
		<div>
			<div class="row" v-for="(row,rowIndex) in $data.list" :key="rowIndex">
				<label style="width:80px;text-align: right;display: inline-block;margin-right:4px;">{{
						rowIndex * 25 + $data.start * 1
					}}</label>
				<el-tag class="cell" :title="rowIndex * 25 + $data.start * 1 + cellIndex" v-for="(it,cellIndex) in row" :key="it"
				        @click="tag_click">{{
						it
					}}
				</el-tag>
			</div>
		</div>

</div>
</template>
<style scoped lang="scss">
.row {
	margin: 5px auto;
}

.cell{
    zoom: 1.2;
}
.cell:hover {
	transform: scale(1.5);
	color: red;
	cursor: default;
}
</style>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "ascii",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"start":0,"number":"0","lines":15,"list":[],"content":"","find":""});


const $props = defineProps({

});


const content_dom = ref();


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const gen_click = function() {
    jv.$saveData("number",$data.number);
    $data.start = parseInt($data.number);
    var ret = [];
    for (var i = 0; i < $data.lines; i++) {
        var row = [];
        for (var j = 0; j < 25; j++) {
            row.push(String.fromCharCode($data.start + i * 25 + j));
        }
        ret.push(row);
    }
    $data.list = ret;
};
const pre_click = function() {
    $data.number = parseInt($data.number) - 500;
    gen_click();
};
const next_click = function() {
    $data.number = parseInt($data.number) + 500;
    gen_click();
};
const tag_click = function(e) {
    var txt = e.target.innerText;

    const  d = content_dom.value.clientWidth / 18
    $data.content = $data.content.slice(0 - d) + txt;
};
const find_click = function(){
    var item = $data.find[0];
    if( !item){
        return;
    }
    for(var i=0;i<4_294_967_295;i++){
        var ch = String.fromCharCode(i);
        if( ch == item){
            $data.number = i;
            gen_click();
            break;
        }
    }
};

onMounted( function() {
    jv.$loadData("number", v=> $data.number = v );
} )



</script>
